<template>
  <div class="c-message" :class="message.status" v-show="message.show">
    <div class="c-message--main">
      <span class="c-message--icon" :class="message.type"></span>
      <div class="c-message--tip">{{ message.text }}</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Alert',
    data() {
      return {
        message: {
          show: false,
          type: 'c-message--success',
          status: 'messageFadeInDown',
          text: '操作成功',
          time: 2000,
          timeout: null
        },
      }
    },
    // props:{
    //   Pmeaasge: {
    //   type: Object,
    //   default () {
    //     return {}
    //   }
    // },
    // },
    methods: {
      Alert(text, type, time) {
        this.message.status = '';
        clearTimeout(this.timeout)
        this.message.text = (typeof text == 'string') && text ? text : '我是默认';
        this.message.time = time ? time : 2000;
        this.message.type = 'c-message--' + (type ? type : 'info');
        this.message.show = true;
        this.message.status = 'messageFadeInDown';
        this.timeout = setTimeout(() => {
          this.message.status = 'messageFadeOutUp'
        }, this.message.time)
      },
    },
  }
</script>

<style>
  .c-message {
    position: fixed;
    top: 40px;
    left: calc(50% - 100px);
    ;
    height: 40px;
    line-height: 40px;
    background: #fff;
    min-width: 200px;
    color: #666;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    text-align: center;
    z-index: 9999;
  }

  .c-message--main {
    padding-left: 50px;
    padding-right: 20px;
  }

  .c-message--icon {
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    width: 40px;
    height: 40px;
  }

  .c-message--success {
    background: #13CE66 url() no-repeat 0 50%;
  }

  .c-message--error {
    background: #FF4949 url() no-repeat 0 50%;
  }

  .c-message--info {
    background: #20A0FF url() no-repeat 0 50%;
  }

  .c-message--warning {
    background: #F7BA2A url() no-repeat 0 50%;
  }

  @keyframes messageFadeInDown {
    0% {
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0)
    }

    100% {
      -webkit-transform: none;
      transform: none
    }
  }

  .c-message.messageFadeInDown {
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: messageFadeInDown;
    animation-name: messageFadeInDown;
  }

  @keyframes messageFadeOutUp {
    0% {
      opacity: 1
    }

    100% {
      opacity: 0;
      -webkit-transform: translateY(-100%);
      transform: translateY(-100%)
    }
  }

  .c-message.messageFadeOutUp {
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: messageFadeOutUp;
    animation-name: messageFadeOutUp
  }
</style>
